<template>
	<view class="container">
		<image :src="url+yhq" mode="" class="yhqimg"></image>
		<view class="couponBox" v-if="list.length>0">
			<ul>
				<li class="couponItem" v-for="item in list">
					<view class="couponPrice">
						￥{{item.yhqPrice}}
					</view>
					<view class="couponInfo">
						<view class="couponTitle">{{item.yhqName}}</view>
						<view>{{item.intro}}</view>
						<view>{{item.startTime | formatDate}} - {{item.endTime | formatDate}}</view>
					</view>
					<view class="couponBtn">
						<view class="couponlod">
							待使用
						</view>
					</view>
				</li>
			</ul>
		</view>
		<view v-if="list.length==0">
			<nullVue></nullVue>
		</view>
	</view>
</template>

<script>
	import nullVue from '@/components/nullT.vue';
	import { userInfo,getPreferential } from '@/api/api.js'
	import config from '@/config'
	export default {
		components:{
			nullVue
		},
		data() {
			return {
				url:config.baseUrl,
				phone:"",
				userInfo:"",
				list:{},
				switch:1,
				yhq:"/uploads/web/yhq.jpg",
			}
		},
		onLoad() {
			this.getHc()
		},
		methods: {
			// 获取缓存
			getHc(){
				let that = this
				// 获取缓存
				uni.getStorage({
				    key: 'data1',
				    success: function (res) {
						that.phone = res.data.phone
						that.getInfo()
				    }
				});
			},
			// 根据手机号获取用户id
			getInfo(){
				userInfo(this.phone).then((res) => {
					this.userInfo = res.info
					this.getYuq()
				  })
			},
			// 根据用户id查询是否有优惠券
			getYuq(){
				let data = {
					yhqFfId:this.userInfo.id,
					switch:this.switch,
				}
				getPreferential(data).then((res) => {
					this.list = res.data
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].yhqPrice = this.list[i].yhqPrice.replace(/\.00$/, '');
					}
				  })
			}
		},
		//时间戳的处理
		filters: {
			formatDate: function(value) {
				var date = new Date(value*1000);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() + ' ';
				// var h = date.getHours() + ':';
				// var m = date.getMinutes() + ':';
				// var s = date.getSeconds();
				return Y+M+D;
			}
		},
	}
</script>

<style>
	.container{
		width: 100%;
		background-color: #8fceef;
	}
	
	.yhqimg{
		width: 100%;
		height: 735rpx;
	}
	
	.couponItem{
		width: 88%;
		display: flex;
		border: 1px solid #ddd;
		border-left: 2px solid #6a8473;
		border-radius: 10rpx;
		padding: 20rpx;
		height: 120rpx;
		box-shadow: 1px 1px 10rpx #ddd;
		background-color: #fff;
		margin: 0 auto 20rpx;
	}
	
	.couponPrice{
		width: 130rpx;
		line-height: 120rpx;
		font-weight: bold;
		color: #6a8473;
	}
	
	.couponInfo{
		font-size: 24rpx;
		line-height: 42rpx;
		color: #949090;
	}
	
	.couponBtn{
		margin-left: auto;
		margin-right: 20rpx;
		border-left: 1px dashed #ddd;
		padding-left: 20rpx;
	}
	
	.couponTxt,.couponlod{
		font-size: 24rpx;
		background-color: #ddd;
		color: #fff;
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		margin-top: 38rpx;
	}
	
	.couponlod{
		background-color: #6a8473;
	}
	
	.couponTitle{
		font-weight: bold;
		color: #000;
	}
	
	.couponBox{
		margin-top: -10rpx;
		padding: 20rpx 0;
	}
</style>